<template>
	<div class="message_comment">
		<div class='free_nav'>
			<router-link to="/layout/found"><img src="../../../assets/icon-close45.png"></router-link>			
			<span>评论消息</span>
		</div>
<!-- ................................................. -->
         <div class="comment_nav">
         	<span :class="{'active':selectSingle}" @click="SelectSingle">魔笛客服</span>
			<span :class="{'active':selectAlbum}" @click="SelectAlbum">评论通知</span>
			<span :class="{'active':selectEntity}" @click="SelectEntity">系统通知</span>
         </div>
<!-- ................................................................................ -->
        <div class="comment_list">
        	<i></i>
        	<div class="comment_list_pc">
	        	<img src="../../../assets/150.150.png">
	        	<span>爱JIJI的林俊杰 回复了你的评论</span>
        	</div>
        	<div class="comment_list_at">
        		<p>可以啊！</p>
        		<p>@小猫:下次我们可以讨论一下</p>
        		<div class="comment_list_down">
        			<img src="../../../assets/4100.png">
        			<div class="comment_list_font">
        				<p>远走高飞</p>
        				<p>金志文</p>
        			</div>
        		</div>
        	</div>
        </div>
         
         <div class="comment_list">
        	<i></i>
        	<div class="comment_list_pc">
	        	<img src="../../../assets/680.png">
	        	<span>爱JIJI的林俊杰 回复了你的评论</span>
        	</div>
        	<div class="comment_list_at">
        		<p>可以啊！</p>
        		<p>@小猫:下次我们可以讨论一下</p>
        		<div class="comment_list_down">
        			<img src="../../../assets/5100.png">
        			<div class="comment_list_font">
        				<p>远走高飞</p>
        				<p>金志文</p>
        			</div>
        		</div>
        	</div>
        </div>


        <div class="comment_list">
        	<i></i>
        	<div class="comment_list_pc">
	        	<img src="../../../assets/150.150.png">
	        	<span>爱JIJI的林俊杰 回复了你的评论</span>
        	</div>
        	<div class="comment_list_at">
        		<p>可以啊！</p>
        		<p>@小猫:下次我们可以讨论一下</p>
        		<div class="comment_list_down">
        			<img src="../../../assets/4100.png">
        			<div class="comment_list_font">
        				<p>远走高飞</p>
        				<p>金志文</p>
        			</div>
        		</div>
        	</div>
        </div>
         <musicPlayer></musicPlayer>
	</div>
</template>
<script>
import musicPlayer from '../../../components/music_player'
	export default {
		name:'messageCenter',
		data(){
			return{
		
				selectSingle:false,
				selectAlbum:true,
				selectEntity:false
		
			}
		},
		components:{
			musicPlayer
		},
		methods:{
			SelectSingle(){
				this.selectSingle = true;
				this.selectAlbum = false;
				this.selectEntity = false;
			},
			SelectAlbum(){
				this.selectSingle = false;
				this.selectAlbum = true;
				this.selectEntity = false;
			},
			SelectEntity(){
				this.selectSingle = false;
				this.selectAlbum = false;
				this.selectEntity = true;
			}
		}

	}
</script>
<style scoped lang="Less">
.message_comment{
	width: 100%;
	padding-bottom: 98/100rem;
	overflow: hidden;
}
.free_nav{
	width: 100%;
	height: 88 / 100rem;
	position: fixed;
	top: 0;
	left: 0;
	background: url('../../../assets/daohang.png');
	background-size: 100%;
}

.free_nav img{
	width: 40 / 100rem;
	height: 40 / 100rem;
	display: inline-block;
    margin-left: 20 / 100rem;
    margin-top:  26 / 100rem;

}
.free_nav span{
	display: inline-block;
	margin-left: 238 / 100rem;
	font-size: 36 / 100rem;
	color: #ffffff;
}
/*......................................*/
.comment_nav{
	         margin-top: 88 / 100rem;
	        display: flex;
			font-size: 30 / 100rem;
			padding-top: 32 / 100rem;
			padding-bottom: 10 / 100rem;
			text-align: center;
}
.comment_nav span{
	        flex:1;
			padding-bottom:10 / 100rem;
			color: #333;
			border-bottom: 4 / 100rem solid #fff;
			display: block;
}
.comment_nav .active{
			color: #c995f5;
			border-bottom: 4 / 100rem solid #c995f5;
			}
/*。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。*/
.comment_list_pc{
	width: 100%;
	height: 80 / 100rem;
	/*background-color: red;*/
    position: relative;
    margin-top: 38 / 100rem;
    margin-bottom: 26 / 100rem;
    color: #33333;
    font-size: 24 / 100rem;
}
.comment_list_pc>img{
	width: 80 / 100rem;
	height: 80 / 100rem;
	margin-left: 20 / 100rem;
}
.comment_list_pc>span{
	display: inline-block;
	position: absolute;
	left: 120 / 100rem;
	top:30 / 100rem;
	color: #333333;
}
/*。。。。。。。。。。。。。。。。。。。。。。。*/
.comment_list{
	position: relative;
	margin-top: 54 / 100rem;
}
.comment_list i{
	position: absolute;
	width:0;
    height: 0;
    border: 40 / 100rem solid transparent;
    border-right:50 / 100rem solid #ededee;
    top: 180 / 100rem;
    left: -38 / 100rem;
}
.comment_list_at{
	width: 519 / 100rem;
	height: 244 / 100rem;
	background-color: #ededee;
	margin-left: 50 / 100rem;
	overflow: hidden;
	font-size: 24 / 100rem;
	color: #333333;
}
.comment_list_at>p{
  margin-left: 54 / 100rem;
  margin-top:22 / 100rem;
}
.comment_list_font{
	width: 264 / 100rem;
	height: 100 / 100rem;
	background-color:#ceccd2;
	position: absolute;
	left: 115 / 100rem;
	top:0;
}
.comment_list_font>p{
	margin-top: 15 / 100rem;
	margin-left: 20 / 100rem;
}
.comment_list_down{
	margin-top: 25 / 100rem;
    margin-left: 54 / 100rem;
	position: relative;
}
.comment_list_down img{
	width: 100 / 100rem;
	height: 100 / 100rem;
}

	
</style>